import React from "react";
import Taro from "@tarojs/taro";
import { View, Text, Input } from "@tarojs/components";
import { ImageView, UploadImage } from "../../components/index";
import { AtImagePicker, AtImagePickerProps } from "taro-ui";
import touxiang from "../../images/touxiang.png";
import jiantou from "../../images/jiantou.png";
import { phoneNumberReg } from "../../utils";
import "./index.scss";

export interface AccountProps {}
export interface StateProps {
  src: string;
  phoneNumber: string;
}

class AccountInfo extends React.Component<AccountProps, StateProps> {
  state: StateProps = {
    src: touxiang,
    phoneNumber: "13263262903",
  };
  handleImageClick = () => {
    // const
    Taro.chooseImage({
      count: 1,
      success: (res) => {
        console.log("res:", res.tempFilePaths[0]);
        Taro.uploadFile({
          url: "http://localhost:3000/api/wx/uploadimg",
          name: "file", // key
          filePath: res.tempFilePaths[0], // 图片路径
          formData: {
            user: "test",
          },
          success: (result) => {
            console.log("result:", JSON.parse(result.data));
            this.setState({
              src: JSON.parse(result.data).data.url,
            });
          },
          fail(err) {
            console.log("er:", err);
          },
        });
      },
      fail(error) {
        Taro.showToast({
          title: error.errMsg,
        });
      },
    });
  };

  render() {
    return (
      <View className="account-info-container">
        {/* <Input type="file" /> */}
        <View className="account-avatar">
          <View className="account-avatar-font">头像</View>
          <View className="account-avatar-img" onClick={this.handleImageClick}>
            <ImageView
              round={true}
              width="100rpx"
              height="100rpx"
              src={this.state.src}
            />
            <View style={{ marginTop: "26rpx", marginRight: "22rpx" }}>
              <ImageView width="50rpx" height="50rpx" src={jiantou} />
            </View>
          </View>
        </View>

        <View className="account-nickname">
          <Text className="nick-key">昵称</Text>
          <Text className="nick-name">devin</Text>
        </View>
        <View className="account-phone">
          <Text className="phone-key">手机号</Text>
          <Text className="phone-number">
            {phoneNumberReg(this.state.phoneNumber)}
          </Text>
        </View>
      </View>
    );
  }
}

export default AccountInfo;
